| Vue 项目中关于 Require 引入静态资源问题 | 您所在的位置：网站首页 › Vue中引入静态资源的几种方式 › Vue 项目中关于 Require 引入静态资源问题 |
Vue 项目中关于 Require 引入静态资源问题
|
前言
Require 是 CommonJS的语法，CommonJS 模块是对象，输入时必须查找对象属性。在项目中的webpack.config.js 等项目配置文件中使用的 require 属于 nodejs 范畴，而进入 index.js 后，加载的组件中的 require 都属于 webpack 的解析范畴。它的目标是鼓励代码的模块化，它使用了不同于传统 标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以 module ID 替代 URL 地址。 Require 的使用requirejs 主要 API: define() – 该函数用于创建模块。每个模块拥有一个唯一的模块 ID (以 .js 结尾，比如 lib/hello.js、hello.js)，它被用于 requirejs 的运行时函数。define 函数是一个全局函数，不需要使用 requirejs 命名空间。 require() – 该函数用于读取依赖。同样它是一个全局函数，不需要使用 requirejs 命名空间。 require.config() – 该函数用于配置 requirejS。很诡异，命名拼接后的路径完全一样，但是打开页面 F12 调试时，发现路径被编译成文件名+一些字符编码.png，这可能是通过 webpack 编译后，生成的路径已经不是原来的那个路径了，而通过 require("src/assets/images/logo.png") 中写绝对路径，会被原样保留并自动找到并加载 dist/public/image/logo.2d32dsa2.png 文件，但如果 require 中放入的是变量 URL，编译打包后就找不到原来的路径了，则报错！ 问题分析 关于静态资源放在 assets 还是 static 的问题：static 目录下的文件不会经过编译。项目在经过打包后，会生成 dist 文件夹，static 中的文件只是复制了一遍而已，由于 webpack 遵守的是 CommonJS 的规范，所以通过 js 动态添加 assets 目录中的静态资源必须要使用 require 才行，否则会被当做模块依赖。 assetsURL: require("../../../assets/images/logo.png") staticURL: "../../../assets/images/logo.png" // 渲染前 .login-wrap { background-image: url("./titlea.png"); } // 渲染后的 css .login-wrap[data-v-70c98a68] { background-image: url(/static/img/titlea.1e9fa570.png); } 问题解决这个问题凡是第一次遇到都会觉得很奇形怪状，我相信很多人碰到之后会不自觉地说出 WTF …… 问题的出现主要是因为修改页面后，webpack 进行编译，等待编译完成后，需要进行工程的打包，等待打包完成后，才能热加载并刷新页面。 如果 require 中传入的是一个变量，他有可能是计算机系统中的任何目录下的任何文件，那么在打包静态资源多时他有可能将你的电脑整个磁盘遍历一遍，所以至少给出在哪个确定的路径目录下，这样才能精确地将哪个路径下的对象文件打包，然后在代码运行时，直接用对应文件名生成正则匹配，因为在打包后的文件可能存在哈希值，也就是文件名后缀的一大串莫名的数字字符组合。 总结综上，请记住尽可能详细的指定 require 中的路径，然后拼接静态资源文件名变量 结尾XDM，啥也不说了这个坑我先踩为敬 [含泪.jpg] …… 撰文不易，欢迎大家点赞、评论，你的关注、点赞是我坚持的不懈动力，感谢大家能够看到这里！Peace & Love。 参考详解vue中静态资源的路径问题(深度好文) - SegmentFault 思否 |
【本文地址】